<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>线路列表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/common.css">
	
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/zpageNav.css">

    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.19.0.js"></script>
    <script src="js/include.js"></script>
    <!--分页插件-->
    <script src="js/zpageNav.js"></script>
</head>
<body>
<div id="header"></div>
<div class="page_one" id="app">
    <div class="contant">
        <div class="crumbs">
            <img src="images/search.png" alt="">
            <p>黑马旅行><span>搜索结果</span></p>
        </div>
        <div class="search">
            <input id="rname" name="rname" type="text" placeholder="请输入路线名称" v-model="rname" class="search_input" autocomplete="off">
            <a href="javascript:void(0);"  @click="changePage(1)" class="search-button">搜索</a>
        </div>
        <div class="hot_pic">
            <img src="images/hot_tel.jpg" alt="">
        </div>
        <div class="hot_tel">
            <p class="hot_time">客服热线(9:00-6:00)</p>
            <p class="hot_num">400-618-9090</p>
        </div>

        <div class="xinxi clearfix">
            <div class="left">
                <div class="header">
                    <span>商品信息</span>
                    <span class="jg">价格</span>
                </div>
                <ul>
                    <li v-for="route in pageInfo.list">
                            <div class="img"><img :src="route.rimage" alt=""></div>
                            <div class="text1">
                                <p>{{route.rname}}</p>
                                <br/>
                                <p>{{route.routeIntroduce}}</p>
                            </div>
                            <div class="price">
                                <p class="price_num">
                                    <span>&yen;</span>
                                    <span>{{route.price}}</span>
                                    <span>起</span>
                                </p>
                                <p><a :href=`route_detail.html?rid=${route.rid}`>查看详情</a></p>
                            </div>
                        </li>

                </ul>
                <div>
                    <!--  page:当前页
                   total:总记录数
                   page-size:页面的大小
                   maxPage:设置展现数字的个数-->
                    <zpage-nav :page="pageInfo.pageNum" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                               :max-page="10" @pageHandler="changePage"></zpage-nav>
                </div>

            </div>
            </div>
        </div>
    </div>
</div>
<div id="footer"></div>
</body>
</html>
<script type="text/javascript">
    new Vue({
            el:"#app",
            data:{
                cid:0,
                pageInfo:{},
                rname:""
            },
            methods:{
                //提交分页请求的方法，参数就是请求第几页
                changePage(pageNum){
                    //分页请求要准备2个数据：cid和pageNum
                    axios.get(`route/findByPageByCid?cid=${this.cid}&pageNum=${pageNum}&rname=${this.rname}`)
                         .then(response => {
                            this.pageInfo= response.data;
                          })
                          .catch(error=>{
                              console.log(error)
                              alert("服务器忙...");
                          });
                }
            },
            created(){
                //解析当前浏览器地址栏获取传递过来的cid
                //location.href 获取地址栏数据，通过解析字符串获取cid的值 这是传统做法比较麻烦
                //这里可以利用导入的一个插件js/getParameter.js，可以根据一个方法就获取里面传入参数的值，里面本质就是截取字符串
                //例如：http://localhost:8080/route_list.html?cid=5   里面就会截取获取到cid的值
                this.cid = getParameter("cid");
                if(!this.cid){
                    this.cid = 0;
                }
                this.changePage(1);
            }
        })
</script>